<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>流浪宠物救助系统</title>
    <link href="static/css/style.css" rel="stylesheet">
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <link href="static/css/IE8.css" rel="stylesheet">
    <![endif]-->
    <!-- layui使用的样式-->
    <link rel="stylesheet" href="${path}/admin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${path}/user/assets/css/amazeui.css"/>
    <link href="${path}/user/css/dlstyle.css" rel="stylesheet" type="text/css">
    <script src="${path}/user/assets/js/jquery.min.js"></script>
    <script src="${path}/user/assets/js/amazeui.min.js"></script>
</head>

<body>
<jsp:include page="header.jsp"></jsp:include>
<div class="res-banner">
    <div class="res-main">
        <div class="login-box">
            <div class="am-tabs" id="doc-my-tabs">
                <ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
                    <li class=""><a>重置密码</a></li>
                </ul>
                <a href="${path}/user/toRegister" class="zcnext am-fr am-btn-default">注册</a>
                <div class="am-tabs-bd">
                    <div class="am-tab-panel am-active">
                        <form action="#" method="post" id="registerForm">
                            <div class="user-phone">
                                <label for="phone"><i class="am-icon-mobile-phone am-icon-md"></i></label>
                                <input type="tel" name="userPhone" id="phone" placeholder="请输入手机号">
                            </div>
                            <div class="user-pass">
                                <label for="password"><i class="am-icon-lock"></i></label>
                                <input type="password" name="userPwd" id="password" required="required"
                                       placeholder="设置新密码">
                            </div>
                            <div class="user-pass">
                                <label for="passwordRepeat"><i class="am-icon-lock"></i></label>
                                <input type="password" name="memberPwd" id="passwordRepeat" required="required"
                                       placeholder="确认密码">
                                <span id="msg"></span>
                            </div>

                            <div class="verification">
                                <label for="code"><i class="am-icon-code-fork"></i></label>
                                <input type="tel" name="code" required="required" id="code" placeholder="请输入验证码">
                                <button id="huoqu" type="button" class="am-btn-xs am-btn-secondary am-round"
                                        style="font-size:18px;height:40px;width:55px" disabled>获取
                                </button>
                            </div>

                            <div class="am-cf">
                                <input type="button" name="" value="重置密码" id="reset"
                                       class="am-btn am-btn-primary am-btn-sm am-fl">
                                <span><a href="${path}/user/toLogin">已有账号？前去登录</a></span>
                            </div>
                        </form>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <!-- layui的js-->
        <script src="${path}/admin/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript">
            var n = 0;
            $("#phone").blur(function () {
                var phone = $("#phone").val();
                var phonerge = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
                if (phone != null && phone != "" && phonerge.test(phone)) {
                    if (n == 0) {
                        $.ajax({
                            url: "${path}/user/resetPasswordGetUserByPhone",
                            type : "post",
                            data: {
                                "phone": phone
                            },
                            success: function (data) {

                                if (data.code == 1) {
                                    //tips层
                                    layui.use(['laypage', 'layer'], function () {
                                        var laypage = layui.laypage, layer = layui.layer;
                                        layer.tips(data.msg, '#phone');
                                    });

                                } else {
                                    layui.use(['laypage', 'layer'], function () {
                                        var laypage = layui.laypage, layer = layui.layer;
                                        layer.tips(data.msg, '#phone');
                                    });

                                    $("#huoqu").removeAttr('disabled');
                                    $("#huoqu").click(function () {
                                        n = 1;
                                        if ($("#phone").val() != "" && phonerge.test(phone)) {

                                            $("#huoqu").attr("disabled", "disabled");
                                            $("#huoqu").css("background", "#CCCCCC");
                                            var alltime = 60;

                                            $.ajax({
                                                type: "post", //提交方式
                                                url: "${path}/user/sendPhoneCode",//路径
                                                data: {
                                                    "phone": phone
                                                },//数据，这里使用的是Json格式进行传输
                                                success: function (result) {//返回数据根据结果进行相应的处理

                                                    if (result.code == 1) {
                                                        layui.use(['laypage', 'layer'], function () {
                                                            var laypage = layui.laypage, layer = layui.layer;
                                                            layer.msg(result.msg, {icon: 2, time: 2000})
                                                        });
                                                    } else {
                                                        layui.use(['laypage', 'layer'], function () {
                                                            var laypage = layui.laypage, layer = layui.layer;
                                                            layer.msg(result.msg, {icon: 1, time: 2000})
                                                        });
                                                    }

                                                }

                                            })
                                            clearInterval(time);
                                            var time = setInterval(function () {
                                                var t = alltime;
                                                if (t == 0) {
                                                    $("#huoqu").text("获取");
                                                    $("#huoqu").css("background", "");
                                                    n = 0;
                                                    clearInterval(time);
                                                } else {
                                                    $("#huoqu").text(t);
                                                    alltime--;
                                                }
                                            }, 1000)
                                        } else {
                                            $("#huoqu").attr('disabled', 'disabled');
                                        }
                                    })
                                }
                            }
                        });

                    }

                } else {
                    layui.use(['laypage', 'layer'], function () {
                        var laypage = layui.laypage, layer = layui.layer;
                        layer.tips("手机号有误", "#phone")
                    });
                    $("#huoqu").attr('disabled', 'disabled');
                }
            });

        </script>
        <script type="text/javascript">
            $("#passwordRepeat").blur(function () {
                if ($("#passwordRepeat").val() != $("#password").val()) {
                    layui.use(['laypage', 'layer'], function () {
                        var laypage = layui.laypage, layer = layui.layer;
                        layer.tips("两次密码不一致", "#passwordRepeat")
                    });
                }
            });
        </script>
        <script type="text/javascript">

            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage, layer = layui.layer;

                var phonerge = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;

                $("#reset").click(function () {

                    if ($("#phone").val() == null || $("#phone").val() == "") {

                        layer.tips("手机号不能为空", "#phone")

                    } else if (!phonerge.test($("#phone").val())) {

                        layer.tips("手机号有误", "#phone")

                    } else if ($("#password").val() == null || $("#password").val() == "") {

                        layer.tips("密码不能为空", "#password")

                    } else if ($("#passwordRepeat").val() != $("#password").val()) {

                        layer.tips("两次密码不一致", "#passwordRepeat")

                    } else if ($("#code").val() == null || $("#code").val() == "") {

                        layer.tips("验证码不能为空", "#code")

                    } else if ($("#phone").val() != null && $("#phone").val() != "" && phonerge.test(phone)) {

                    } else if ($("#password").val() != null && $("#password").val() != "" && $("#passwordRepeat").val() == $("#password").val()
                        && $("#code").val() != null && $("#code").val() != "" && $("#phone").val() != null && $("#phone").val() != "" &&
                        phonerge.test($("#phone").val())) {
                        $.ajax({
                            url: "${path}/user/resetPassword",
                            type: "post",
                            dataType: "json",
                            data: {
                                "password": $("#password").val(),
                                "phone": $("#phone").val(),
                                "code": $("#code").val()
                            }, success: function (data) {
                                if (data.code == 0) {
                                    layer.msg(data.msg, {icon: 1, time: 2000}, function () {
                                        //重置成功跳转到登录界面
                                        location.href = "${path}/user/toLogin";
                                    });

                                } else {
                                    //重置失败，刷新页面
                                    layer.msg(data.msg, {icon: 2, time: 2000}, function () {
                                        location.reload();
                                    });
                                }
                            }
                        });
                    }


                });
            });
        </script>

</html>
